<template>
  <div>
    <h3>TreeDemo</h3>
    <hr />
    <div>
      <el-tree
          :data="data"
          show-checkbox
          :props="defaultProps"
          @node-click="handleNodeClick"
          default-expand-all

          node-key="id"
          ref="treeDemo"
      ></el-tree>
    </div>


    <button  @click="selectedId">获取选中的节点的ID</button>
    <button  @click="test">点击选中某一些节点</button>

  </div>
</template>

<script>
export default {
  name: "TreeDemo",
  data(){
    return {
      data: [
        {
          id:1,
          name:"蜗牛成都校区",
          list:[
            {
              id:101,
              name:"教学部",
            },
            {
              id:102,
              name:"咨询部"
            },
            {
              id:103,
              name:"就业部"
            }
          ]
        },
        {
          id:2,
          name:"蜗牛上海校区",
          list:[
            {
              id:201,
              name:"教学部",
            },
            {
              id:202,
              name:"咨询部"
            },
            {
              id:203,
              name:"就业部"
            }
          ]
        },
        {
          id:3,
          name:"蜗牛武汉校区",
          list:[
            {
              id:301,
              name:"教学部",
            },
            {
              id: 302,
              name: "咨询部"
            }
          ]
        },
        {
          id:4,
          name:"蜗牛重庆校区",
          list:[
            {
              id:401,
              name:"教学部",
            },
            {
              id: 402,
              name: "咨询部"
            }
          ]
        }
      ],
      defaultProps: {
        children: 'list',
        label: 'name'
      }
    }
  },
  methods:{
    handleNodeClick(node){
      console.log(node)
    },
    selectedId(){
      let ids = this.$refs.treeDemo.getHalfCheckedKeys();
      console.log(ids);
    },
    test(){

    }
  }
}
</script>

<style scoped>

</style>